var vm = new Vue({
    el: '#app',
    data: {
        host: host,
        username: '',
        mobile: '',
        sms_code: '',
        password: '',
        sms_code_tip:'获取验证码',
        sending_flag: true,

        remember: false,  // 同意协议
        remember_error_message:'',

        name_error: false,
        name_error_message:'',
        mobile_error: false,
        mobile_error_message:'',
        pwd_error: false,
        pwd_error_message:'',
        code_error: false,
        code_error_message:'',
    },
    methods: {
        // 检查数据
        check_username: function(){
            re = /^\w{5,15}$/;

            if (!re.test(this.username)) {
                this.name_error_message = "用户名格式不正确";
                this.name_error = false;
            }
            else {
                var url = this.host + '/username/' + this.username;
                axios.get(url)
                    .then(response=>{
                        if (response.data.count==0){
                            this.name_error = true;
                            this.name_error_message = '';
                        }
                        else {
                            this.name_error = false;
                            this.name_error_message = '当前用户名不可用';
                        }
                    })
                    .catch(error=>{

                    });
                this.name_error = true;
            }
        },
        check_mobile: function(){
            var re = /^1[3-9]\d{9}$/;
            if (!re.test(this.mobile)) {
                this.mobile_error_message = '手机号格式不正确';
                this.mobile_error = false;
            }
            else {
                var url = this.host + '/mobile/' + this.mobile;
                axios.get(url)
                    .then(response=>{
                        if (response.data.count==0){
                            this.mobile_error = true;
                            this.mobile_error_message = '';
                        }
                        else {
                            this.mobile_error = false;
                            this.mobile_error_message = '当前手机号不可用';
                        }
                    })
                    .catch(error=>{

                    });
                this.name_error = true;
            }
        },
        check_pwd: function(){
            var re = /^\w{8,24}$/;
            if (!re.test(this.password)) {
                this.pwd_error_message = '请填写8-24位密码,包含数字,字母,下划线';
                this.pwd_error = false;
            }
            else {
                this.pwd_error_message = '';
                this.pwd_error = true;
            }
        },
        check_sms_code: function(){
            var re = /^\d{6}$/
            if (!re.test(this.sms_code)) {
                this.code_error_message = '请填写6位数字验证码';
                this.code_error = false;
            }
            else {
                this.code_error_message = '';
                this.code_error = true;
            }
        },
        // 获取短信验证码
        get_sms_code: function(){
            if (this.sending_flag) {
                this.sending_flag = false;
                this.check_mobile();
                if (this.mobile_error) {
                    var url = this.host + "/sms_code/" + this.mobile;
                    axios.get(url)
                        .then(response => {
                            // 表示后端发送短信成功
                            // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                            var num = 60;
                            // 设置一个计时器
                            var t = setInterval(() => {
                                if (num == 1) {
                                    // 如果计时器到最后, 清除计时器对象
                                    clearInterval(t);
                                    // 将点击获取验证码的按钮展示的文本回复成原始文本
                                    this.sms_code_tip = '获取验证码';
                                    // 将点击按钮的onclick事件函数恢复回去
                                    this.sending_flag = true;
                                } else {
                                    num -= 1;
                                    // 展示倒计时信息
                                    this.sms_code_tip = num + '秒';
                                }
                            }, 1000)
                        })
                        .catch(error => {
                            alert(response.message);
                            this.sending_flag = true;
                        });
                }
                else {  //手机号校验失败
                    this.sending_flag = true;
                }
            }
        },
        // 表单提交
        on_submit: function() {
            this.check_username();
            this.check_pwd();
            this.check_mobile();
            this.check_sms_code();
            if (this.remember){
                this.remember = 'true';
                this.remember_error_message = '';
            }
            else {
                this.remember_error_message = '请勾选同意用户协议';
            }

            if (this.name_error | this.pwd_error | this.code_error | this.mobile_error | this.remember) {
                axios.post(this.host + '/users/', {
                    username: this.username,
                    password: this.password,
                    mobile: this.mobile,
                    sms_code: this.sms_code,
                    allow: this.remember,
                }, {
                    responseType: 'json',
                    withCredentials: true
                })
                    .then(response => {
                        // 使用浏览器状态保存本地存储保存token
                        // 注册默认以未记住登录状态保存
                        sessionStorage.clear();
                        localStorage.clear();
                        sessionStorage.token = response.data.token;
                        sessionStorage.user_id = response.data.user_id;
                        sessionStorage.username = response.data.username;

                        // 跳转页面
                        location.href = '/index.html';
                    })
                    .catch(error => {
                        console.log(error);
                        if (error.response.status == 400) {
                            if ('non_field_errors' in error.response.data) {
                                this.remember_error_message = error.response.data.non_field_errors[0];
                            } else {
                                alert('数据有误');
                            }
                            this.error_sms_code = true;
                        } else {
                            console.log(error.response.data);
                        }
                    })
            }
        }

    }
});